<template>
  <a-layout>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <div class="top-header">
          <div class="logo-wrapper">
            <div class="logo-img">
              <svg
                t="1654936674237"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2797"
                width="48"
                height="32"
              >
                <path
                  d="M512 1024c-106.514286 0-184.457143-6.742857-231.657143-20.114286-19.885714-5.6-34.971429-12.571429-46.057143-21.142857-16.571429-12.8-21.942857-27.314286-23.657143-37.257143l-0.114285-0.8-14.057143-104.457143-7.771429-0.457142-63.657143-461.371429 9.371429 0.342857-6.057143-45.257143H76.457143L100.342857 193.142857c2.857143-16.8 12.342857-30.971429 25.485714-40l13.714286-77.942857c5.028571-28.457143 29.828571-49.028571 59.085714-49.028571h437.6C645.6 10.285714 662.285714 0 681.371429 0h142.857142C851.428571 0 873.942857 21.028571 876.571429 48.914286l0.571428 6.4c3.542857 6.057143 6.057143 12.685714 7.314286 19.771428l13.714286 77.942857c13.142857 9.028571 22.628571 23.2 25.485714 40l23.885714 140.342858h-52l-6.057143 45.257142 9.371429-0.342857-63.657143 461.371429-7.771429 0.457143-14.057142 104.457143-0.114286 0.8c-1.6 9.942857-7.085714 24.457143-23.657143 37.257142-11.085714 8.571429-26.171429 15.542857-46.057143 21.142858C696.457143 1017.257143 618.514286 1024 512 1024z"
                  fill="#25467A"
                  p-id="2798"
                />
                <path
                  d="M512 231.314286H165.828571L260.571429 936.914286s6.057143 36.342857 251.428571 36.342857 251.428571-36.342857 251.428571-36.342857l94.742858-705.485715H512z"
                  fill="#BBDEFB"
                  p-id="2799"
                />
                <path
                  d="M512 435.771429c-165.371429 0-328.571429-5.028571-328.571429-5.028572l49.828572 361.028572c76.685714 4.571429 169.6 7.885714 278.742857 7.885714s202.057143-3.314286 278.742857-7.885714l49.828572-361.028572s-163.2 5.028571-328.571429 5.028572z"
                  fill="#1E88E5"
                  p-id="2800"
                />
                <path
                  d="M826.057143 54.057143c-0.114286-1.828571-1.142857-3.2-2.171429-3.2H681.142857c-1.028571 0-1.942857 1.371429-2.171428 3.2l-4.8 52.457143H830.857143l-4.8-52.457143z"
                  fill="#EEEEEE"
                  p-id="2801"
                />
                <path
                  d="M834.514286 84.228571c-0.8-4.228571-4.8-7.428571-9.485715-7.428571H198.971429c-4.685714 0-8.8 3.085714-9.485715 7.428571l-21.257143 120.8h687.542858L834.514286 84.228571z"
                  fill="#F5F5F5"
                  p-id="2802"
                />
                <path
                  d="M873.6 201.828571c-0.8-4.914286-4.914286-8.571429-9.6-8.571428H160c-4.685714 0-8.8 3.657143-9.6 8.571428l-13.942857 81.485715h751.085714l-13.942857-81.485715z"
                  fill="#FFFFFF"
                  p-id="2803"
                />
                <path
                  d="M512 720.8c-35.314286 0-64-28.685714-64-64 0-7.085714 5.714286-12.8 12.8-12.8s12.8 5.714286 12.8 12.8c0 21.257143 17.257143 38.4 38.4 38.4s38.4-17.142857 38.4-38.4c0-7.085714 5.714286-12.8 12.8-12.8s12.8 5.714286 12.8 12.8c0 35.428571-28.685714 64-64 64z"
                  fill="#25467A"
                  p-id="2804"
                />
                <path
                  d="M384 554.4m-38.4 0a38.4 38.4 0 1 0 76.8 0 38.4 38.4 0 1 0-76.8 0Z"
                  fill="#25467A"
                  p-id="2805"
                />
                <path
                  d="M640 554.4m-38.4 0a38.4 38.4 0 1 0 76.8 0 38.4 38.4 0 1 0-76.8 0Z"
                  fill="#25467A"
                  p-id="2806"
                />
                <path
                  d="M332.8 618.4h-51.2c-14.171429 0-25.6 11.428571-25.6 25.6s11.428571 25.6 25.6 25.6h51.2c14.171429 0 25.6-11.428571 25.6-25.6 0-14.057143-11.428571-25.485714-25.6-25.6zM742.4 618.4h-51.2c-14.171429 0-25.6 11.428571-25.6 25.6s11.428571 25.6 25.6 25.6h51.2c14.171429 0 25.6-11.428571 25.6-25.6 0-14.057143-11.428571-25.485714-25.6-25.6z"
                  fill="#BBDEFB"
                  p-id="2807"
                />
              </svg>
            </div>
            <div class="logo-title" @click="goFirstHome">便利店管理系统</div>
          </div>

          <div class="top-user">
            <a-dropdown :trigger="['click']" placement="bottom">
              <div class="top-user-avatar">
                <a-avatar
                  alt="USER"
                  shape="circle"
                  size="large"
                  :style="{
                    backgroundColor: '#1e1e1e',
                    verticalAlign: 'middle',
                  }"
                  >{{ avatarText }}</a-avatar
                >
              </div>
              <template #overlay>
                <a-menu>
                  <div class="identity">
                    <contacts-outlined />
                    {{user.roleName}}
                  </div>
                  <a-divider style="margin: 4px 0;border-top: 1px solid rgb(0 0 0 / 22%);" />
                  <a-menu-item key="2" @click="logOut">
                    <template #icon>
                      <div>
                        <import-outlined />
                      </div>
                    </template>
                    <span>退出登陆</span>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </a-layout-header>
      <a-layout>
        <a-layout-sider
          v-model:collapsed="collapsed"
          theme="light"
          collapsible
          breakpoint="lg"
          collapsed-width="80"
          style="margin-top: 2px; padding: 0"
        >
          <div class="menu-wrapper">
            <a-menu v-model:selectedKeys="selectedKeys" mode="inline" @click="changeMenu">
              <a-menu-item key="firstHome">
                <home-outlined />
                <span>首页</span>
              </a-menu-item>
              <a-menu-item v-if="permission.indexOf('account')!==-1" key="account">
                <user-outlined />
                <span>用户管理</span>
              </a-menu-item>
              <a-menu-item v-if="permission.indexOf('commodity')!==-1" key="commodity">
                <coffee-outlined />
                <span>商品管理</span>
              </a-menu-item>
              <a-menu-item v-if="permission.indexOf('store')!==-1" key="store">
                <shop-outlined />
                <span>门店管理</span>
              </a-menu-item>
              <a-menu-item v-if="permission.indexOf('supplier')!==-1" key="supplier">
                <team-outlined />
                <span>供应商管理</span>
              </a-menu-item>
              <!-- --------------------------------/ -->
              <a-menu-item v-if="permission.indexOf('purchase')!==-1" key="purchase">
                <dot-chart-outlined />
                <span>采购管理</span>
              </a-menu-item>
              <a-menu-item v-if="permission.indexOf('warehouse')!==-1" key="warehouse">
                <bank-outlined />
                <span>入库管理</span>
              </a-menu-item>
              <a-sub-menu v-if="permission.indexOf('sell')!==-1" key="xs">
                <template #icon>
                  <MailOutlined />
                </template>
                <template #title>销售报表</template>
                <a-menu-item key="statistic">销售统计报表</a-menu-item>
                <a-menu-item key="commodityRank">热销商品排行</a-menu-item>
              </a-sub-menu>
              <a-menu-item v-if="permission.indexOf('system')!==-1" key="system">
                <solution-outlined />
                <span>系统日志</span>
              </a-menu-item>
            </a-menu>
          </div>
        </a-layout-sider>
        <a-layout-content
          :style="{
            margin: '5px 16px',
            padding: '24px',
            background: '#fff',
            minHeight: '280px',
          }"
        >
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  ImportOutlined,
  CrownOutlined,
  CoffeeOutlined,
  TeamOutlined,
  ShopOutlined,
  FundViewOutlined,
  DotChartOutlined,
  BankOutlined,
  BulbOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { defineComponent, ref } from "vue";
export default defineComponent({
  components: {
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    ImportOutlined,
    CrownOutlined,
    CoffeeOutlined,
    TeamOutlined,
    ShopOutlined,
    FundViewOutlined,
    DotChartOutlined,
    BankOutlined,
    BulbOutlined,
    SettingOutlined,
  },

  setup() {
    return {
      avatarText: ref("kiko"),
      selectedKeys: ref(["account"]),
      collapsed: ref(false),
      permission: ref({}),
      user: ref(JSON.parse(window.sessionStorage.getItem("login_user")))
    };
  },
  created() {
    this.selectedKeys = [this.$route.name + ""];
    this.avatarText = JSON.parse(
      window.sessionStorage.getItem("login_user")
    ).userName.substr(0, 1);
    let p = window.sessionStorage.getItem("user_permission");
    p = p.replace("[", "");
    p = p.replace("]", "");
    p = p.replace(/\s*/g, "");
    this.permission = p.trim().split(",");
  },
  methods: {
    goFirstHome() {},
    logOut() {
      sessionStorage.removeItem("access_token");
      this.$router.push("/");
      message.info("登出成功");
    },
    changeMenu(item, key, keyPath) {
      this.$router.push("/index/" + item.key);
    },
  },
});
</script>
<style scoped>
:deep(.ant-layout-sider-children) {
  display: flex;
  flex-direction: column;
}
.menu-wrapper {
  height: 90%;
  overflow: hidden auto;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.menu-wrapper::-webkit-scrollbar{
    width: 6px;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  .menu-wrapper::-webkit-scrollbar-track{
    border-radius: 10px;
    background-color: #ececec;
  }
  /*定义滑块 内阴影+圆角*/
  .menu-wrapper::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: #cdcdce;
  }

.identity {
  color: rgb(255 255 255);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  background: rgb(128, 164, 146);
  margin-top: 2px;
  user-select: none;
}
.top-user-avatar {
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.top-user-avatarText {
  font-size: 18px;
  display: flex;
  align-items: center;
}
.top-user {
  margin: 0 3rem;
}
.logo-img {
  display: flex;
  align-items: center;
}

.logo-wrapper {
  display: flex;
  align-items: center;
}
.logo-title {
  cursor: pointer;
  color: rgb(27, 27, 27);
  font-size: 20px;
  font-weight: 600;
  transition: border-color 0.3s, background 0.3s, color 0.3s,
    padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.ant-layout {
  height: 100%;
}

#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}
</style>